import React, {Component} from 'react';
import {Relax, msg} from 'iflux2';
import {Map, OrderedSet} from 'immutable';
import {Row, Col, Pagination, Checkbox} from 'antd';

import noop from 'util/noop';

@Relax
export default class Pages extends Component {
    static defaultProps = {
        pagination: Map(),
        selectAll: false,
        indeterminate: false,
        queryOrderList: noop,
        setPagination: noop,
        selectAll4Page: noop,
    }

     constructor(props){
        super(props);
        //页面滚动控制，翻页时调用
        this.pageWrapper = null;
     }

    componentDidMount() {
        if(window.document.getElementById("react-content")){
            this.pageWrapper = window.document.getElementById("react-content").getElementsByClassName("page-wrapper")[0];
        }

        //页面变化重置参数
        msg.on('page_changed',() => {
            this.scrollTop();
        })
    }
    

    scrollTop(){
        if(this.pageWrapper){
            this.pageWrapper.scrollTop = 0;
        }else if(window.document.getElementById("react-content")){
            window.document.getElementById("react-content").getElementsByClassName("page-wrapper")[0].scrollTop = 0;
        }
    }

    render() {
        const {pagination, selectAll, indeterminate, selectAll4Page} = this.props;

        return (
            <Row className="pagination-retail">
                <Col span="7">
                    <div className="lh28">
                        <Checkbox checked={selectAll}
                                  indeterminate={indeterminate}
                                  onChange={()=>selectAll4Page(!selectAll)}>全选</Checkbox>
                    </div>
                </Col>
                <Col span="17">
                    <Pagination className="pull-right"
                                size="default"
                                current={pagination.get('pageNum')}
                                total={pagination.get('totalCount')}
                                pageSize={pagination.get('pageSize')}
                                showQuickJumper={true}
                                showSizeChanger={true}
                                pageSizeOptions={['10', '20', '30', '40']}
                                showTotal={(total, range) => `共${total}条`}
                                onChange={(page)=>this.changePageNum(page)}
                                onShowSizeChange={(current, size)=>this.changePageSize(current, size)}/>
                </Col>
            </Row>
        )
    }


    selectAll(e) {
        this.setState({
            selectAll: e.target.checked
        })
    }


    /**
     * 下页操作
     * @param pageNum
     */
    changePageNum(pageNum) {
        this.props.setPagination({pageNum: pageNum});
        this.query();
        this.scrollTop()
    }


    /**
     * 修改pageSize
     * @param current
     * @param pageSize
     */
    changePageSize(current, pageSize) {
        this.props.setPagination({pageNum: 1, pageSize});
        this.query();
        this.scrollTop();
    }


    /**
     * 列表查询
     */
    query() {
        // const {range_picker, simpleType, simpleValue, ...rest} = this.props.form.getFieldsValue();
        // const expand = this.props.getExpand();

        // let params = {};
        // if (expand) {
        //     params = Object.assign(params, rest, {
        //         startTime: !!range_picker ? range_picker[0].startOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
        //         endTime: !!range_picker ? range_picker[1].endOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
        //     })
        // }else {
        //     params = Object.assign(params, {
        //         [simpleType]: simpleValue
        //     })
        // }
        this.setLoading(true)
        this.props.queryOrderList()
            .then(()=>{
                this.setLoading(false)
            })
            .catch(error=>{
                this.setLoading(false)
            });
    }

     setLoading = (loading)=>{
        msg.emit('setLoading', loading);
    }
}